<script setup lang="ts">
import { inject, ref } from 'vue'
import { useActiveOp } from '@renderer/views/imgViewer/hooks/useActiveOp'
import { EnumAllViewType } from '@renderer/views/imgViewer/imgTypes'
import StackViewOpContainer from '@renderer/views/imgViewer/components/opBtn/StackViewOpContainer.vue'
import MprViewOpContainer from '@renderer/views/imgViewer/components/opBtn/MprViewOpContainer.vue'
import VolumeViewOpContainer from '@renderer/views/imgViewer/components/opBtn/VolumeViewOpContainer.vue'
import axios from 'axios'

const emits = defineEmits(['rotate', 'reset'])
const viewStatus = defineModel('viewStatus') as any
const {
  baseUri,
  throughGatewayFlag
} = inject('pyImgHandlerIo') as any


const {
  setActiveOp
} = useActiveOp()

interface IButton {
  label: string,
  value: string,
  icon?: string,
  disabled?: boolean,
}

const viewType = inject('viewType') as EnumAllViewType
const activeViewType = inject('activeViewType') as any

const handleRotate = (subType) => {
  setActiveOp({
    type: 'rotate',
    subType: subType
  })
  emits('rotate', subType)
}

const handleReset = (subType) => {
  setActiveOp({
    type: 'reset',
    subType: subType
  })
  emits('reset', subType)
}

const playStateRef = ref(false)
const handlePlay = async () => {
  playStateRef.value = !playStateRef.value
  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`
  const msg = {
    playSpeed: 0.1,
    viewType: viewType == EnumAllViewType.stack ? viewType : activeViewType.value
  }
  await axios.post(`${prefix}play`, msg)
}
const handlePause = async () => {
  playStateRef.value = !playStateRef.value
  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`
  const msg = {
    viewType: viewType == EnumAllViewType.stack ? viewType : activeViewType.value
  }
  await axios.post(`${prefix}pause`, msg)
}

</script>

<template>
  <div class="btnContainer">
    <template v-if="viewType == EnumAllViewType.stack">
      <stack-view-op-container
        @rotate="handleRotate"
        @reset="handleReset"
        v-model:viewStatus="viewStatus"
      />


    </template>
    <template v-else-if="viewType == EnumAllViewType.mpr">
      <mpr-view-op-container
        @rotate="handleRotate"
        @reset="handleReset"
        v-model:viewStatus="viewStatus"
      />
    </template>
    <template v-else>
      <volume-view-op-container
        @rotate="handleRotate"
        @reset="handleReset"
        v-model:viewStatus="viewStatus"
      />
    </template>
    <div>
      <el-button v-if="!playStateRef" class="w-full !ml-0" @click="handlePlay">play</el-button>
      <el-button v-else class="w-full !ml-0" @click="handlePause">pause</el-button>
    </div>
  </div>
</template>

<style scoped>
.btnContainer {
  @apply w-full flex flex-col pt-[10px] flex-1 overscroll-contain;
  height: calc(100% - 100px);
  width: 100%;
}

.btnWrapper {
  width: calc(100% - 10px);
}

.el-button {
  margin-left: 0px !important;
}

</style>
